<template>
  <div class="goods-content"  v-loading="loadPage">
    <!-- 关键词搜索框 -->
    <template v-if="!loadPage">
        <div class="search-input-container" ref="searchInput">
            <el-input
                class="search-input"
                :placeholder="$t('goods.placeHolder.productText')"
                v-model="params.keyword"
                clearable
                @keyup.enter.native="inputSearch"
                @input="inputSearch"
                @clear="inputSearch"
            >
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
        </div>
        <template v-if="listMsg && listMsg.length > 0">
            <goods-list
                class="list"
                v-loadmore="loadmoreOptions"
                :keyword="params.keyword"
                :list="listMsg"
                :hx-id-obj="hxIdObj"
                @toDetail="toDetail"
            ></goods-list>
            <div v-if="!hasNextPage" class="all-desc">{{$t('common.base.allResultsLoaded')}}</div>
        </template>

        <div v-else class="default">
            <div class="default-img">
                <img :src="noDataImage" alt="" />
            </div>
            <div class="default-msg">{{$t('common.base.tip.noData')}}</div>
        </div>
    </template>

  </div>
</template>
<script>
import GoodsList from './GoodsList.vue';
import { queryGoodsList } from '@src/api/PortalApi.ts';
import { debounce } from 'lodash'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { openAccurateTab } from '@src/util/platform'
import { getOssUrl } from '@src/util/assets'
const noDataImage = getOssUrl('/no_data.png')
export default {
  name: 'good-manage',
  props: {
    hxIdObj: {
      type: Object,
    },
  },
  data() {
    return {
      params: {
        keyword: '',
        pageNum: 1,
        pageSize: 20,
        orderDetail: {},
        putawayStatus: 1,
      },
      loadmoreOptions: {
        disabled: false,
        callback: this.loadmore,
      },
      hasNextPage: false, // 是否有下一页
      loadPage: true,
      noDataImage,
      listMsg: [],
    };
  },
  async mounted() {
    await this.search();
    this.loadPage = false
  },
  methods: {
    inputSearch: debounce(function(){
      this.params.pageNum = 1;
      this.search();
    },200),
    async loadmore() {
      this.loadmoreOptions.disabled = true;
      try {
        this.params.pageNum += 1;
        this.search();
      } catch (error) {
        console.error(error);
      }
    },
    async search() {
        const { code, data } = await queryGoodsList(this.params);
        if(code != 200) return
        this.listTotal = data.total;
        if (this.params.pageNum == 1) {
            this.listMsg = data.list;
        } else {
            this.listMsg = this.listMsg.concat(data.list);
        }
        this.loadmoreOptions.disabled = !data.hasNextPage;
        this.hasNextPage = data.hasNextPage
    },
    toDetail(item) {
      // 新页面打开商品详情
        let fromId = window.frameElement.getAttribute('id');
        openAccurateTab({
            type: PageRoutesTypeEnum.PageGoodsDetail,
            key: item.id,
            titleKey: ` - ${item.commodityName}`,
            params: `id=${item.id}`,
            fromId,
        });
    },
  },
  components: {
    [GoodsList.name]: GoodsList,
  },
};
</script>
<style lang="scss" scoped>
.goods-content {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  .search-input-container {
    margin-bottom: 10px;
  }
  .list {
    margin-top: 8px;
  }
  .all-desc{
    padding: 10px 0;
    text-align: center;
    color: #909399;
  }
}
.document-list-container {
  overflow: auto;
  flex: 1;
  display: block;
}
::-webkit-scrollbar {
  display: none;
}
.default {
  text-align: center;
  .default-img {
    margin-top: 80px;
    img {
      width: 160px;
      height: 160px;
    }
  }
  .default-msg {
    margin-top: 8px;
    color: $text-color-regular;
  }
}
</style>